<template>
  <div class="blog-footer">
    <b-container fluid>
      <div class="blog-container-fluid">
        <b-row style="padding-top: 20px">
          <b-col cols="2">
            <router-link to="/" class="blog-brand">
            {{management.title}}
            </router-link>
          </b-col>
          <b-col cols="5" class="blog-info">
            {{management.logan}}
          </b-col>
          <b-col cols="5">
            <el-input placeholder="查找文章" v-model="input" clearable>
            </el-input>
          </b-col>
        </b-row>
        <el-divider></el-divider>
        <b-row>
          <b-col sm="4">
            <b-row class="footer-title">
              <b-col cols="12">座右铭</b-col>
            </b-row>
            <b-row class="footer-content">
              <b-col cols="12">
                {{management.motto}}
              </b-col>
            </b-row>
          </b-col>
          <b-col sm="4">
            <b-row class="footer-title">
              <b-col cols="12">个人简介</b-col>
            </b-row>
            <b-row class="footer-content">
              <b-col cols="12">
                {{management.intro}}
              </b-col>
            </b-row>
          </b-col>
          <b-col sm="4">
            <b-row class="footer-title">
              <b-col cols="12">联系博主</b-col>
            </b-row>
            <b-row class="footer-content">
              <b-col cols="6">
                {{management.contact}}
              </b-col>
              <b-col cols="6">
                <el-image
                  :src="src"
                  :fit="fit"
                  style="width: 80px; height: 80px"
                ></el-image>
              </b-col>
            </b-row>
          </b-col>
        </b-row>
        <el-divider></el-divider>
        <b-row style="height: 60px;margin-top: 35px;font-size: 12px">
          <b-col sm="6" offset-sm="4">
            Copyright&nbsp;&copy;&nbsp;{{management.begin}}-{{nowYear}}&nbsp;{{management.title}}.&nbsp;All&nbsp;rights&nbsp;reserved.&nbsp;{{management.copyright}}
          </b-col>
        </b-row>
      </div>
    </b-container>
  </div>
</template>

<script>
import { BContainer, BCol, BRow } from "bootstrap-vue";
export default {
  name: "tail",
  components: {
    BCol,
    BContainer,
    BRow
  },
  computed: {
    nowYear() {
      let now = new Date();
      return now.getFullYear();
    }
  },
  data() {
    return {
      input: "",
      src:
        "https://blue.rainbowecho.top/group1/M00/00/02/rB-G2l8ak06AdySHABwtegybv00707.jpg",
      fit: "cover",
      management: {}
    };
  },
  async mounted() {
    let managementRes = await this.$axios({method: 'get', url: '/article-service/manage'})
    this.management = managementRes.data[0]
  },
};
</script>

<style scoped>
.blog-footer {
  background-color: #1e2022;
  color: #707070;
}
.footer-title {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 5px;
}

.footer-content {
  font-size: 12px;
}
.blog-info {
  line-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

.blog-brand {
  color: #707070;
  font-size: 26px;
  font-weight: bold;
}

.blog-brand:hover {
  color: white;
}
</style>
